<template>
        <div id="app">
          <Tou></Tou>
      <div class="zhong">
        <span>首页  /   个人中心</span>
        <div class="zhong_1">
            <div class="zhong_1_1">
                <div class="zhong_1_1_2">
                    <h3>订单中心</h3>
                    <ul>
                        <li><a :href="'dingdan2.html?qq=' + mail.qq">我的订单</a></li>
                        <li><a href="javascript:void(0)">评价晒单</a></li>
                        <li><a href="javascript:void(0)">话费充值订单</a></li>
                        <li><a href="javascript:void(0)">以旧换新订单</a></li>
                    </ul>
                </div>
                <div class="zhong_1_1_2">
                    <h3>客服中心</h3>
                    <ul>
                        <li><a href="javascript:void(0)">我的订单</a></li>
                        <li><a href="javascript:void(0)">评价晒单</a></li>
                        <li><a href="javascript:void(0)">话费充值订单</a></li>
                        <li><a href="javascript:void(0)">以旧换新订单</a></li>
                    </ul>
                </div>
                <div class="zhong_1_1_2">
                    <h3>服务中心</h3>
                    <ul>
                        <li><a href="javascript:void(0)">我的订单</a></li>
                        <li><a href="javascript:void(0)">评价晒单</a></li>
                        <li><a href="javascript:void(0)">话费充值订单</a></li>
                        <li><a href="javascript:void(0)">以旧换新订单</a></li>
                    </ul>
                </div>
                <div class="zhong_1_1_2">
                    <h3>售后服务</h3>
                    <ul>
                        <li><a href="javascript:void(0)">我的订单</a></li>
                        <li><a href="javascript:void(0)">评价晒单</a></li>
                        <li><a href="javascript:void(0)">话费充值订单</a></li>
                        <li><a href="javascript:void(0)">以旧换新订单</a></li>
                    </ul>
                </div>
                <div class="zhong_1_1_2">
                    <h3>账户管理</h3>
                    <ul>
                        <li><a href="javascript:void(0)">我的订单</a></li>
                        <li><a href="javascript:void(0)">评价晒单</a></li>
                        <li><a href="javascript:void(0)">话费充值订单</a></li>
                        <li><a href="javascript:void(0)">以旧换新订单</a></li>
                    </ul>
                </div>
            </div>
            <div class="zhong_1_2">
                <div class="zhong_1_2_1">
                    <div class="zhong_1_2_2">
                        <img :src="getAssetsFile(mail.mail_img)" style="width: 130px;">
                        <div>
                            <p><h3>{{mail.user}}</h3></p>
                            <p>早上好~</p>
                            <p><el-button @click="getMail(mail),dialogFormVisible = true">修改信息</el-button></p>
                             <!-- 修改 -->
                              <el-dialog style="width: 626px;margin: auto;" title="个人信息" v-model="dialogFormVisible">
                                <el-form>
                                  <div>
                                  <label>头像</label>
                                  <input type="file" @change="selectFile($event)" style="border: none;background-color: white;">
                                  <img :src="getAssetsFile(mail.mail_img)" style="width: 66px;">
                                    <el-button @click="upfile()">确定更换头像</el-button>
                                </div>
                                <div>
                                  <label>QQ</label>
                                  <el-input class="input_qq" disabled v-model="mail.qq">
                                  </el-input>
                                </div>
                                <div>
                                  <label>昵称</label>
                                  <el-input v-model="mail.user">
                                  </el-input>
                                </div>
                                <div>
                                  <label>密码</label>
                                  <el-input
                                  type="password"
                                   v-model="mail.pass"
                                  >
                                  </el-input>
                                </div>
                                <div>
                                  <el-date-picker
                                    v-model="mail.m_date"
                                    type="date"
                                    placeholder="选择日期">
                                  </el-date-picker>
                                </div>
                                </el-form>
                              <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="danger" @click="MailUpdate(),dialogFormVisible = false">确 定</el-button>
                              </div>
                              </el-dialog>
                        </div>
                    </div>
                    <div>
                        <p><span>账号安全：较低</span></p>
                        <p><span>QQ账号：********</span></p>
                        <p><span>QQ邮箱：********@qq.com</span></p>
                    </div>
                </div>
                <hr>
                <div class="zhong_1_2_1">
                    <div class="zhong_1_2_3">
                        <img src="../assets/image/xiaomi_1.png">
                        <div>
                          <p>待支付订单</p>
                          <p><a href="javascript:void(0)">查看待支付订单></a></p>
                        </div>
                    </div>
                    <div class="zhong_1_2_3">
                        <img src="../assets/image/xiaomi_2.png">
                        <div>
                            <p>我的订单</p>
                            <p><router-link :to="{path: `/dingdan2/${mail.qq}`,}">查看订单</router-link>></p>
                        </div>
                    </div>
                    <div class="zhong_1_2_3">
                      <img src="../assets/image/xiaomi_3.png">
                      <div>
                        <p>待支付订单</p>
                        <p><a href="javascript:void(0)">查看待支付订单></a></p>
                      </div>
                  </div>
                  <div class="zhong_1_2_3">
                    <img src="../assets/image/xiaomi4.png">
                    <div>
                      <p>待支付订单</p>
                      <p><a href="javascript:void(0)">查看待支付订单></a></p>
                    </div>
                </div>
                </div>
            </div>
        </div>
      </div>
      <Wei></Wei>
      </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getAssetsFile } from "../assets/img";
import { useRoute } from "vue-router";
import axios from "axios";
import "../assets/css/bootstrap.css";
import Tou from "../views/tou.vue";
import Wei from "../views/wei.vue";

const mail: any = ref({});
const dialogFormVisible = ref(false);
const file = ref(null);

/**用户*/
const route = useRoute();
mail.value.qq = route.params.qq;
const Mail = () => {
  axios.get("http://127.0.0.1:1234/U/" + mail.value.qq).then((response) => {
    mail.value = response.data;
  });
};
Mail();

/**根据id获取*/
const getMail = (mail) => {
  axios.get("http://127.0.0.1:1234/U/" + mail.qq).then((response) => {
    mail.value = response.data;
  });
};

/**修改头像*/
const selectFile = (event) => {
  console.log(event);
  file.value = event.target.files[0];
};
const upfile = () => {
  let formdata = new FormData();
  formdata.append("file", file.value);
  axios
    .post("http://127.0.0.1:1234/upfile/files", formdata, {
        headers: {
            'Content-Type': 'multipart/form-data',
        },
    })
    .then((res) => {
      mail.value.mail_img = res.data;
      console.log(res.data);
    });
};
/**修改信息*/
const MailUpdate = () => {
  axios
    .put(`http://127.0.0.1:1234/U/`, mail.value)
    .then((response) => {
      if (response.data === 1) {
        history.go(0);
      }
    })
    .catch((err) => {
      alert(err);
    });
};
</script>
<style scoped>
@import "../assets/css/TandW.css";
body {
  background: rgb(245, 245, 245);
}
.zhong {
  width: 1226px;
  margin: 26px auto;
}
.zhong_1 {
  float: left;
}
.zhong_1_1 {
  background-color: white;
  width: 218px;
  float: left;
  margin-right: 20px;
}
.zhong_1_1 h3 {
  line-height: 52px;
}
.zhong_1_1_2 {
  margin: 0 48px 12px;
}
.zhong_1_2 {
  float: left;
  width: 888px;
  background-color: white;
}
.zhong_1_2 img {
  width: 126px;
  border-radius: 10px;
}
.zhong_1_2_1 {
  display: flex;
  flex-wrap: wrap;
  margin: 66px;
}
.zhong_1_2_2 {
  width: 280px;
  display: flex;
  /* flex-wrap: wrap; */
}
.zhong_1_2_2 input {
  margin-bottom: 20px;
}

.zhong_1_2_3 {
  width: 280px;
  display: flex;
  margin: 38px;
}
.zhong_1_2_3 p {
  line-height: 38px;
}
label {
  font-size: 20px;
  margin-right: 26px;
}
.input_qq {
  height: 38px;
  font-size: 26px;
  border: none;
  color: gray;
  background-color: white;
}

.dialog-footer button:first-child {
  margin: 30px 20px 30px 300px;
}
.dialog-footer button{
  width: 88px;
}
</style>
